import React from "react";
import { Doughnut } from "react-chartjs-2";
import { connect } from "react-redux";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend);

const DoughnutChart = ({ theme, title, description, chartData }) => {
  const options = { 
    cutout:"90%",
    width:"300",
    plugins: {
        legend: {
        position: 'bottom',
        labels: {
            usePointStyle: true,
            pointStyle: 'circle',
            pointStyleWidth:'15',
            }
        }
    }
    };
  const datas ={
    labels: ['Red', 'Blue', 'Yellow', 'Green'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5],
        backgroundColor: [
            '#0058FF',
            '#21D59B',
            '#FFC700',
            '#F99600',
        ],
        borderColor: [
            '#0058FF',
            '#21D59B',
            '#FFC700',
            '#F99600',
        ],
        borderWidth: 1,
      },
    ],
  }
  return (
    <>
        <h5>{title}</h5>
        <div className="chart">
          <Doughnut options={options} data={datas}/>
        </div>
    </>

  );
};

export default connect(store => ({
  theme: store.theme.currentTheme
}))(DoughnutChart);
